<!-- 角色编辑表单 -->
<template>
  <q-card style="width: 600px">
    <!-- 标题 -->
    <q-toolbar>
      <q-toolbar-title>{{ title }}</q-toolbar-title> <q-btn v-close-popup icon="close" round flat />
    </q-toolbar>
    <q-separator />

    <!-- 内容 -->
    <q-card-section>
      <q-splitter v-model="splitModel" :horizontal="$q.screen.xs">
        <template #before>
          <q-form ref="formRef" class="q-pr-md">
            <q-input v-model="dto.roleCode" label="角色编码" :rules="[required]" :readonly="readonly || isEdit" />
            <q-input v-model="dto.roleName" label="角色名称" :rules="[required]" :readonly="readonly" />
            <q-input v-model="dto.remark" label="备注说明" type="textarea" rows="2" :readonly="readonly" />
            <q-field class="col-6 q-field--float q-mt-md" label="角色状态：">
              <template #control>
                <q-option-group v-model="dto.disabled" :options="disableOptions" inline dense :disable="readonly" />
              </template>
            </q-field>
          </q-form>
        </template>
        <template #after>
          <div class="q-pa-sm">
            菜单权限
            <q-checkbox v-model="tickStrategy" label="级联选择" :true-value="'leaf'" :false-value="'strict'" class="q-ml-md">
              <q-tooltip>
                选择级联后，勾选上级会同时选中所有的下级节点，但提交时不会提交父级节点，只会提交叶子节点。<br />
                仅用于批量选择，提交前还是要去除勾选，然后手动选择父级节点。
              </q-tooltip>
            </q-checkbox>
          </div>
          <div class="q-pl-sm" style="max-height: 300px; overflow-y: auto">
            <!-- prettier-ignore -->
            <q-tree v-model:ticked="dto.menuIds" :nodes="menuOptions" node-key="menuId" label-key="menuName" :tick-strategy="tickStrategy"/>
          </div>
        </template>
      </q-splitter>
    </q-card-section>
    <q-separator />

    <!-- 操作 -->
    <q-card-actions v-if="!readonly">
      <q-checkbox v-model="closeAfterSave" label="保存后关闭" />
      <q-space />
      <q-btn v-close-popup>取消</q-btn>
      <q-btn color="primary" icon="save" :disable="loading" @click="handleSubmitBefore">保存</q-btn>
    </q-card-actions>
  </q-card>
</template>

<script lang="ts" setup>
  import { onMounted, ref } from 'vue';
  import { disableOptions, useCrudForm } from 'src/composables';

  import { Message } from 'src/utils';
  import { required } from 'src/utils/validator';
  import { MenuDto, getMenuTree } from 'src/api/system/menu';
  import crudApi, { RoleDto } from 'src/api/system/role';

  // 属性和事件定义
  const props = defineProps({
    id: { type: [String, Number], required: false, default: undefined },
    title: { type: String, required: false, default: '角色表单' },
    readonly: { type: Boolean, required: false, default: false },
  });
  const emit = defineEmits(['close', 'after-save']);

  const menuOptions = ref<MenuDto[]>([]);
  onMounted(() => getMenuTree().then((data) => (menuOptions.value = data)));
  // 表单数据
  const emptyRole = { menuIds: [], disabled: false };
  const { formRef, dto, closeAfterSave, loading, handleSubmit, isEdit } = useCrudForm<RoleDto>(crudApi, emptyRole, props, emit);

  const splitModel = ref(55);
  const tickStrategy = ref<'strict' | 'leaf'>('strict');

  function handleSubmitBefore() {
    if (tickStrategy.value == 'leaf') {
      Message.warning('请取消级联选择，并手动选择所有父级节点');
      return;
    }
    handleSubmit();
  }
</script>
src/api/system/menu
